<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>点击小图显示大图并可切换</title>  
    <style>  

        .thumbnail-container {  
            display: flex;
        }  
  
        .thumbnail {  
            width: 100px;  
            height: 100px;  
            margin-right: 10px;  
            cursor: pointer;  
        }  
  
        .thumbnail.selected {  
            border: 2px solid red;  
        }  
  
        .fullscreen-container {  
            display: none; 
            flex-direction: column;  
            align-items: center;  
        }  
  
        .fullscreen {  
            width: 100%;  
            max-width: 800px;  
            margin-bottom: 10px;  
        }  
  
        button {  
            margin: 0 5px;  
        }  
    </style>  
</head>  
<body>  
  
    <div class="gallery">  
        <div class="thumbnail-container">  
            <img class="thumbnail feed-item-img" src="1_s.jpg" alt="Image 1" data-full="1.jpg">  
            <img class="thumbnail feed-item-img" src="2_s.jpg" alt="Image 2" data-full="2.jpg">  
            <img class="thumbnail feed-item-img" src="3_s.jpg" alt="Image 3" data-full="3.jpg">  
        </div>  
        <div class="fullscreen-container">  
            <img class="fullscreen" src="" alt="Fullscreen Image">  
            <button class="prev-btn">上一张</button>  
            <button class="next-btn">下一张</button>  
        </div>  
    </div>  

    <div class="gallery">  
        <div class="thumbnail-container">  
            <img class="thumbnail" src="4.jpg" alt="Image 1" data-full="4.jpg">  
            <img class="thumbnail" src="5.jpg" alt="Image 2" data-full="5.jpg">  
            <img class="thumbnail" src="6.jpg" alt="Image 3" data-full="6.jpg">  
        </div>  
        <div class="fullscreen-container">  
            <img class="fullscreen" src="" alt="Fullscreen Image">  
            <button class="prev-btn">上一张</button>  
            <button class="next-btn">下一张</button>  
        </div>  
    </div>  
  

  
    <script>  
        function initGallery(galleryElement) {  
            const thumbnailContainer = galleryElement.querySelector('.thumbnail-container');  
            const fullscreenContainer = galleryElement.querySelector('.fullscreen-container');  
            const fullscreen = fullscreenContainer.querySelector('.fullscreen');  
            const prevBtn = fullscreenContainer.querySelector('.prev-btn');  
            const nextBtn = fullscreenContainer.querySelector('.next-btn');  
            const thumbnails = Array.from(thumbnailContainer.querySelectorAll('.thumbnail'));  
      
            let currentIndex = 0;  
      
            function showFullscreenImage() {  
                const clickedThumbnail = thumbnails[currentIndex];  
                const fullImageUrl = clickedThumbnail.getAttribute('data-full');  
                fullscreen.src = fullImageUrl;  
                fullscreenContainer.style.display = 'flex';  
            }  
      
            // 为缩略图添加点击事件监听  
            thumbnails.forEach(thumbnail => {  
                thumbnail.addEventListener('click', () => {  
                    // 移除其他缩略图的高亮  
                    thumbnails.forEach(thumb => thumb.classList.remove('selected'));  
                    // 为点击的缩略图添加高亮  
                    thumbnail.classList.add('selected');  
      
                    currentIndex = thumbnails.indexOf(thumbnail);  
                    showFullscreenImage();  
                });  
            });  
      
            // 为大图添加点击事件监听  
            fullscreen.addEventListener('click', () => {  
                fullscreenContainer.style.display = 'none';  
                // 可选：移除缩略图的高亮  
                thumbnails.forEach(thumb => thumb.classList.remove('selected'));  
            });  
      
            prevBtn.addEventListener('click', () => {  
                currentIndex = (currentIndex - 1 + thumbnails.length) % thumbnails.length;  
                showFullscreenImage();  
            });  
      
            nextBtn.addEventListener('click', () => {  
                currentIndex = (currentIndex + 1) % thumbnails.length;  
                showFullscreenImage();  
            });  
        }  
      
        // 初始化所有的图片列表  
        const galleries = document.querySelectorAll('.gallery');  
        galleries.forEach(gallery => initGallery(gallery));  
    </script>  
  
</body>  
</html>